<template>
  <div class="balance-main">
    <div class="top">
      <div class="top-left">
        <div class="dot-common"></div>
        <span class="text">我的电子现金</span>
      </div>
      <div class="top-right">
        <router-link to="/account/rebate/factory_cash/detail/index" class="button thumb">使用电子现金明细</router-link>
      </div>
    </div>
    <div class="top-second">
      <div class="top-second-left">￥&nbsp;{{ twoFixed(800000) }}</div>
    </div>

    <div class="content">
      <Balance
        :showTitle="true"
        :showSearch="false"
        title="电子现金变动明细"
        :searchPlaceholder="`搜索流水号和订单号`"
      >
        <template #header>
          <div class="header">
            <div class="part">
              收入：<span class="value">￥&nbsp;{{ twoFixed(800000) }}</span>
            </div>
            <div class="part">
              支出：<span class="value">￥&nbsp;{{ twoFixed(500000) }}</span>
            </div>

            <div class="sel-part">
                  <Select placeholder="全部厂家" />
            </div>
          </div>
        </template>
      </Balance>

      <div class="table-container"><Table 
        :topCss="{
            background:'#f5f8fe',
            height:'.3042rem',
            fontSize:'.0893rem'
        }"
        :tdCss="{
            fontSize:'.07rem',
            padding:'.04rem'
        }"
        :lineCss="{
            height:`.2188rem`,
            background:'#f5f8fe',
        }"
        :borderSpacing="`0 .0729rem`"
        headerFamily="PuHuiMedium"
        :dataSource="factoryCash"
        :headerFontSize="`400`" 
        :column="column"></Table></div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { twoFixed } from "@/utils/util";
import Balance from "@/components/Balance/index.vue";
import Select from "@/components/Select/index.vue";
import Table,{Column} from "@/components/Table";
import factoryCash  from "@/json/factoryCash.json";

const column = ref<Array<Column>>([
  { title: "流水号", dataKey: "serial_number", width: 200,align:'center' },
  { title: "操作事项", dataKey: "handle_matters",align:'center' ,width: 200},
  { title: "使用厂家", dataKey: "use_factory",align:'center' ,width: 150},
  { title: "时间", dataKey: "time", width: 180 ,align:'center'},
  { title: "金额", dataKey: "amount", width: 180,align:'center' },
  { title: "变动后的余额", dataKey: "after_amount", width: 180,align:'center' },
]);


</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
